/*
 * Copyright (C) 2017 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";

.bcs__trigger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 10px 3px;
  border-bottom-left-radius: 5px;
  background-color: $electric;
  box-shadow: -1px 1px 2px 0 rgba(0,0,0,.2);

  &:after {
    content: '';
    display: block;
    position: fixed;
    top: 58px;
    right: 0;
    bottom: 0;
    width: 8px;
    background-color: $electric;
    box-shadow: -1px 0 1px 0 rgba(0,0,0,.2)
  }
}

.bcs__content {
  border-bottom: 2px solid $ic-border-color;

  .bcs__body {
    margin: 0 1.5em;
  }
}

.bcs__history-item {
  margin-bottom: 3em;
}

.bcs__history-item__title, .bcs__unsynced-item__title {
  border-bottom: 2px solid $ic-color-medium;
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;

  & > * {
    display: inline-block;
    margin-left: 1em;
  }
}

.bcs__history-item__change {
  padding: 1em;
  border: 1px solid $ic-border-color;

  &.bcs__history-item__change-log-row {
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0.8em 0;

    &.bcs__history-item__change-log-row__heading {
      padding-bottom: 0.5em;

      .bcs__history-item__content-grid {
        > span > span > span:first-child {
          padding-left: 0,
        }
      }
    }

    .bcs__history-item__content-grid {
      left: 0;

      > span > span > span:first-child {
        padding-left: 30px,
      }
    }

    .bcs__history-item__lock-icon {
      left: 0;
    }
  }

  & + & {
    border-top: none;
  }

  &:first-of-type {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
  }

  &:last-of-type {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  &.bcs__history-item__change__expanded {
    .pill {
      background-color: $ic-color-medium;
      color: $ic-color-light;
    }
  }

  .pill {
    text-transform: uppercase;
    padding: 0.1em 0.75em;
  }
}

.bcs__history-item__content {
  min-height: 1.5em;
  position: relative;
}

.bcs__history-item__content-grid {
  position: absolute;
  top: 0;
  right: 0;
  left: 50px;
}

.bcs__history-item__change-exceps {
  margin: 0 2em;
  list-style: none;
}

.bcs__history-item__change-exceps__group {
    margin: 1.5em 0 1em;
}

.bcs__history-item__change-exceps__courses {
  margin: 0.5em 0 0;
  list-style: none;

  > li {
    margin-bottom: 5px;
  }
}

.bcs__history-item__lock-icon {
  position: absolute;
  top: -5px;
  left: 10px;
}

@keyframes spinning {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bcs__sync-btn-icon {
  position: relative;
  top: 2px;

  &.bcs__sync-btn-icon__active svg {
    animation: spinning 1.5s infinite linear;
  }
}

.bcs__sync-btn-text {
  margin-left: 7px;
  margin-right: 7px;
}

.bcs__row {
  padding: 0.5em 0;
  border-top: 1px solid $ic-border-color;

  & > button:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  &.bcs__row__associations {
    border: none;
  }

  .bcs__row-right-content {
    float: right;
    line-height: 2.5em;
    vertical-align: middle;
  }
}

.bcs__header {
  background: $electric;
  position: relative;
  text-align: center;
  padding: 1.2em 1.75em 1.2em 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
}

.bcs__close-wrapper {
  float: left;

  button {
    position: relative;
    top: -0.25em;
    left: 0.5em;
  }
}

.bcs__modal-content-wrapper {
  margin: 0 auto;
  max-width: 850px;
  position: relative;

  &.bcs__modal-content-wrapper__wide {
    max-width: 1200px;
  }
}

.bca__overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,.85);
  text-align: center;
}

.bca__overlay__save-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.bca__footer {
  display: flex; justify-content: flex-end; flex: 0 0 auto;
}

.bca-course-filter {
  border: 1px solid $ic-border-color;
  border-radius: $ic-border-radius;

  input, select {
    // overwrite instui borders to match design
    border: none !important;
  }

  select {
    // use box shadow magic to create fancy border effect, overwriting instui
    box-shadow: inset -10px 0 0 7px $ic-color-light, inset 1px 0 0 0 $ic-border-color !important;
  }
}

.bca-course-details__wrapper {
  margin-top: 1em;
  position: relative;

  &> div > div {
    // overwrite instui padding to match design
    padding-left: 0 !important;
  }
}

.bca-course-picker__loading {
  position: absolute;
  z-index: 10;
  top: 28px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background: rgba(255,255,255,.65);
  text-align: center;
  padding-top: 100px;
  border-radius: $ic-border-radius;
}

.bca-table__wrapper {
  border: 1px solid $ic-border-color;
  border-radius: $ic-border-radius;
  padding: 78px 0 0;
  position: relative;
  overflow: hidden;

  .btps-table__header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    .bca-table__head {
      background: $ic-color-medium-light;

      th {
        line-height: 180%;
      }
    }
  }

  .bca-table__select-all {
    padding: 8px 2px;
    border-bottom: 1px solid $ic-border-color;
    margin: 0 10px;

    label > span > span:last-child {
      margin-left: 22px;
    }
  }

  .bca-table__content-wrapper {
    height: 270px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 30px;

    .bca-table__body {
      tr {
        // overwrite instui borders to match design
        border-left: none !important;

        td:first-child {
          // overwrite instui borders to match design
          border-bottom: none !important;

          // recreate the borders using box shadow
          box-shadow: -42px 1px 0 0 $ic-color-light, 0 1px 0 0 $ic-border-color;
        }

        &.bca-table__no-results {
          td {
           box-shadow: none;
         }
        }
      }
    }
  }
}

.bca-associations-table {
  padding-left: 10px;
  margin-bottom: 40px;
  position: relative;
  min-height: 75px;

  .bca-associations__course-row {
    form {
      margin: 0;
    }
  }
  .bca-associations__x-col {
    text-align: right;
  }
}

.bcs__history-notification {
  margin-bottom: 1em;
}

.bcs__migration-sync__button {
  display: flex;
  justify-content: flex-end;
}

// extra padding only when in sidebar
.bcs__row-sync-holder .bcs__migration-sync__button button {
  padding: 22px 15px;
}

.bcs__row.bcs__row-sync-holder {
  margin: 0 0 1.5em;
  padding-top: 0;
  border: none;
}

.bcs__migration-sync .bcs__migration-sync__loading {
  margin-bottom: 2em;
}

/* MigrationOptions component styles */
.bcs__history-settings > label,
.bcs__history-notification__add-message,
.bcs__history-notification__message {
  margin-bottom:.5em;
}

.bcs__history-notification__add-message {
  margin-left: 1em;
  label {
    margin-right: .5em;
  }
}

.bcs__unsynced-changes .bcs__history-notification {
  padding-top: 1em;
}

.bcc__master-child-stack {
  position: relative;

  &:before {
      content: '';
      background: $ic-color-medium;
      width: 1px;
      display: block;
      position: absolute;
      top: 10px;
      bottom: 100px;
      left: 50%;
  }
}

.bcc__master-child-stack__box {
  padding: 1em;
  background: $ic-color-medium-light;
  width: 235px;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2);
  position: relative;

  header {
    text-transform: uppercase;
  }

  &.bcc__master-child-stack__box__master {
    background: $electric;
    color: $ic-color-light;
    margin-bottom: 30px;
  }

  p {
    margin: 0;
  }
}

.bcc__master-child-stack__box__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5em;
}

.bpc__lock-no__toggle {
  padding-right: 12px;
  position: relative;
  top: 2px;
  font-size: 1.25em;

  .bpc__lock-no__toggle-icon  {
    position: relative;
    top: 4px;
    margin-right: 6px
  }
}

.bcs__unsynced-item__table {
  table {
    border-collapse: separate;
    .bcs__unsynced-item {
      td {
        width: 17%;
        vertical-align: middle;
      }
      td:first-child {
        width: 66%;
      }
      td:last-child {
        text-align: right;
      }
      .bcs__unsynced-item__name {
        display: flex;
      }
    }
  }
}
